
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>jQuery Scrollify - Power steering for your scroll wheel</title>
		<!--[if lt IE 9]>
		<script src="js/html5shiv.min.js"></script>
		<![endif]-->

		<link rel="stylesheet" href="css/main.css" />

	</head>
	<body>
		<section class="panel home" data-section-name="home">
			<div class="inner">
				<header>
					<h1>SCROLLIFY</h1>
					<p class="tagline">Power steering for your scroll wheel</p>
				</header>
				<p>A jQuery plugin that assists scrolling and smoothly snaps to sections.</p>
				<p>Fully configurable and optimised for touch.</p>

			</div>
		</section>
		<section class="panel overview" data-section-name="overview">
			<div class="inner">
				<h2>Basic Setup</h2>
				<p>Scrollify requires jQuery 1.6+ and an easing library such as jquery.easing.js.</p>
				<pre>
	&lt;! doctype html&gt;
	&lt;html&gt;
		&lt;head&gt;
			&lt;script&gt;
				$(function() {
					$.scrollify({
						section : "section",
					});
				});
			&lt;/script&gt;
		&lt;/head&gt;
		&lt;body&gt;
			&lt;section&gt;&lt;/section&gt;
			&lt;section&gt;&lt;/section&gt;
		&lt;/body&gt;
	&lt;/html&gt;
				</pre>
			</div>
		</section>
		<section class="panel configuration" data-section-name="configuration">
			<div class="inner">
			<h2>Configuration</h2>
				<pre>
	$.scrollify({
		section : "section",
		sectionName : "section-name",
		easing: "easeOutExpo",
		scrollSpeed: 1100,
		offset : 0,
		scrollbars: true,
		before:function() {},
		after:function() {}
	});
				</pre>

			</div>
		</section>
		<section class="panel options" data-section-name="options">
			<div class="inner">
				<h2>Options</h2>
				<dl>
					<dt>section</dt>
					<dd>A selector for the sections.</dd>
					<dt>sectionName</dt>
					<dd>Scrollify lets you define a hash value for each section. This makes it possible to permalink to particular sections. This is set as a data attribute on the sections. The name of the data attribute is defined by 'sectionName'.</dd>
					<dt>easing</dt>
					<dd>Define the easing method.</dd>
					<dt>offset</dt>
					<dd>A distance in pixels to offset each sections position by.</dd>
					<dt>scrollbars</dt>
					<dd>A boolean to define whether scroll bars are visible or not.</dd>
					<dt>before</dt>
					<dd>A callback that is called before a section is scrolled to via the move method. Arguments include the index of the section and an array of all section elements.</dd>
					<dt>after</dt>
					<dd>A callback that is called after a new section is scrolled to. Arguments include the index of the section and an array of all section elements.</dd>
				</dl>
			</div>
		</section>
		<section class="panel methods" data-section-name="methods">
			<div class="inner">
				<h2>Methods</h2>
				<p>The move method can be used to scroll to a particular section. This can take the index of the section, or the name of the section preceded by a hash.</p>
				<pre>
	$.scrollify("move","#name");
				</pre>
			</div>
		</section>


		<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
		<script src="js/jquery.easing.1.3.js"></script>
		<script src="js/scrollify.min.js"></script>
		<script src="js/main.js"></script>
	</body>
</html>